<template>

		<el-container style="height: 100%">
			<el-aside>
				<div class="treeleft">
					<el-input v-model="filterText" placeholder="搜索组织机构" />
					<el-tree :expand-on-click-node="false" @node-click="treeclick" :filter-node-method="filterNode" :data="treedata" ref="tree" :props="defaultProps" default-expand-all />
				</div>

			</el-aside>
			<el-main style="padding: 15px">
				<scTable
					ref="table"
					:params="filterData"
					:apiObj="list.apiObj"
					row-key="userid"
					stripe
					border
				>
					<el-table-column  type="selection" width="50"></el-table-column>
					<el-table-column label="姓名" prop="name" width="150"></el-table-column>
					<el-table-column label="编号" prop="userid" width="150"></el-table-column>
					<el-table-column label="别名" prop="alias" width="150"></el-table-column>
					<el-table-column label="性别" prop="gender" width="150"></el-table-column>
					<el-table-column label="状态" prop="status" width="150">
						<template #default="scope">
						<el-tag size="medium" style="margin-left: 10px">{{ cleardata(scope.row.status) }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="岗位" prop="position" width="150"></el-table-column>
					<el-table-column label="操作" prop="position" width="150">
						<template #default="scope">
						<el-button @click="tableclick(scope.row)" style="margin-left: 5px;margin-top: 5px" type="primary" size="small">设置人员权限</el-button>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
<el-dialog
	:title="userTitle"
	v-model="userStatus"
	lock-scroll
	:close-on-click-modal="false"
	draggable
	style="height: 70%;overflow: auto"
	width="30%">

	<el-tree @check="userAuthCheckClick" node-key="id" show-checkbox :data="userAuthlist.authoritys" :default-checked-keys="userDefaultList" ref="userTree" :props="defaultProps2" default-expand-all />
<!--	<template #footer>
	<span  class="dialog-footer">
    <el-button type="primary" @click="diaClick">确定</el-button>
  </span>
	</template>-->
</el-dialog>
</template>

<script >

export default {
	data() {
		return {
			defaultProps2:{
				children: 'child',
				label: 'describe',
				disabled: 'disabled',
			},
			userDefaultList:[],
			userAuthlist:{},
			userTitle:"设置用户权限",
			userStatus:false,
			defaultProps:{
				children: 'subordinates',
				label: 'name',
				disabled: 'disabled',
			},
			list: {
				apiObj: this.$API.dept.userList,
				params: {},
			},
			filterData: {
				id: null,
				type: "",
				subType: "",
			},
			filterText:'',
			defaultlist:[],
			treedata:[],
			currentUserInfo:{}
		}
	},
	methods: {
		async userAuthCheckClick(val,val2){
			let urls = []
			val2.checkedNodes.forEach(item => {
				urls.push(item.name)
			})
			let deptId = this.currentUserInfo.id
			console.log(val2.checkedKeys,urls,deptId)
			//先判断有没有id没有的话走新增
			debugger
			if(this.userAuthlist.id){
				//有值走更新
				let resk = await this.$API.dept.updateAuthUser.get({
					"authorityIds": val2.checkedKeys,
					"authoritys": urls,
					"enterpriseId": deptId,
					"id":this.userAuthlist.id
				})
				if(resk && resk.code === 200){
					this.$message.success(resk.msg);
				}else {
					this.$message.error(resk.msg);
				}
				console.log(resk)
			}else{
				//走新增
				let resk = await this.$API.dept.addAuthUser.get({
					"authorityIds": val2.checkedKeys,
					"authoritys": urls,
					"enterpriseId": deptId,
				})
				if(resk && resk.code === 200){
					this.$message.success(resk.msg);
				}else {
					this.$message.error(resk.msg);
				}
				console.log(resk)
			}
			this.tableclick(this.currentUserInfo)
		},
		async tableclick(res){
			this.userDefaultList = []
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			this.userTitle = "设置【" + res.name + "】用户权限"
			this.currentUserInfo = res
			this.userStatus = true
			//调用根据用户id查询所有权限数据接口
			let data = await this.$API.dept.getAuthUser.get({
				"enterpriseId":res.id
			})
			if(data.data){
				this.userAuthlist = data.data
				//递归遍历所有选中的节点然后拿到id赋值
				this.queryId(this.userAuthlist.authoritys,this.userDefaultList)
				console.log(data)
				loading.close()
			}else{
				this.$message.error(data.message);
				if(!this.userAuthlist || !this.userAuthlist.authoritys){
					let res2 = await this.$API.dept.authorityList.get();
					this.userAuthlist.authoritys = res2.data
				}
				loading.close()
			}
		},
		queryId(list,ar){
			list.forEach(item => {
				if(item.selected !== 0){
					ar.push(item.id)
				}
				if(item.child && item.child.length > 0){
					this.queryId(item.child,ar)
				}
			})
		},
		cleardata(res){
			if(res){
				if(res === "1"){
					return "已激活"
				}
				if(res === "2"){
					return "已禁用"
				}
				if(res === "4"){
					return "未激活"
				}
				if(res === "5"){
					return "退出企业"
				}
			}

		},
		treeclick(res){
			this.$refs.table.reload({
				"departmentId":res.id
			})
			console.log(res)
		},
		filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		}
	},
	watch:{
		filterText(val) {
			console.log(this.$refs.tree)
			this.$refs.tree.filter(val);
		}
	},
	async created() {
		let res = await this.$API.dept.list.get();
		this.treedata = res.data;

		console.log(res.data)
	}
}
</script>
<style>
.treeleft{
	background: #ffffff;
	padding: 15px;
	height: 100%;
	width: auto;
}

</style>
